<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人博客</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="../static/bootstrap-3.3.5-dist/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet"
          href="../static/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script
            src="../static/bootstrap-3.3.5-dist/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
            src="../static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script>

        var b=window.screen.availWidth;//工作区宽度
        var s= document.documentElement.scrollWidth;//网页真实宽度 也就是肉眼看到的宽度

        function  start(){
            alert(b);
            document.getElementById("div1").style.width=b-10+'px';
           // $("div1").css("width",b);
            var xx=getScrollTop();
            alert(xx);
            var xx1=getScrollWidth();
            alert(xx1);
            document.getElementById("div1").style.width=b-xx1+'px';
        }
      //  var scrollbarWidth = document.getElementById('body1').offsetWidth - document.getElementById('body1').scrollWidth;
       // alert(scrollbarWidth);
        function getScrollTop()
        {
            var scrollTop=0;
            if(document.documentElement&&document.documentElement.scrollTop)
            {
                scrollTop=document.documentElement.scrollTop;
            }
            else if(document.body)
            {
                scrollTop=document.body.scrollTop;
            }
            return scrollTop;
        }
        function getScrollWidth() {
            var noScroll, scroll, oDiv = document.createElement("DIV");
            oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
            noScroll = document.body.appendChild(oDiv).clientWidth;
            oDiv.style.overflowY = "scroll";
            scroll = oDiv.clientWidth;
            document.body.removeChild(oDiv);
            return noScroll-scroll;
        }
    </script>
</head>

<body id="body1" style="height: 900px;margin-left: 0px;" onload="start()">
123123123321
<div id="div1" style="height: 100%; margin-left: 0px;background-color: red;">
11
</div>
</body>
</html>